<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <svg width="100%" height="100%" viewBox="0 0" xmlns="http://www.w3.org/2000/svg">
        <!-- <g stroke="green" fill="white" stroke-width="5"> -->
        <rect x="25" y="25" width="100" height="100" />
        <!-- </g> -->
    </svg>
    <svg width="200" height="200" viewBox="0 0 100 100">
        <defs>
            <!-- 箭头标记 -->
            <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
                orient="auto-start-reverse">
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>

            <!-- 单点标记 -->
            <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
                <circle cx="5" cy="5" r="5" fill="red" />
            </marker>
        </defs>

        <!-- 坐标轴绘制 -->
        <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)"
            marker-end="url(#arrow)" />

        <!-- line图绘制 -->
        <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)"
            marker-mid="url(#dot)" marker-end="url(#dot)" />
    </svg>

</body>
<script>

</script>

</html>